<template>
  <div>
    <el-card style="margin: 20px">
      <CategorySelect @getCategoryId="getCategoryId"></CategorySelect>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin: 20px">
      <div v-show="!isShowSpuForm && !isShowSkuForm">
        <el-table
          :data="spuList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin-left: 20px"
            @click="addSpuInfo"
            >添加</el-button
          >

          <el-table-column type="index" label="序号" align="center" width="80">
          </el-table-column>
          <el-table-column prop="spuName" label="spu名称"> </el-table-column>
          <el-table-column label="spu描述" prop="description">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <HintButton
                title="gogogo"
                icon="el-icon-plus"
                size="mini"
                type="primary"
                name="添加"
                @click="addSku(row)"
              ></HintButton>
              <HintButton
                title="gogogo"
                icon="el-icon-edit"
                size="mini"
                type="primary"
                name="修改"
                @click="changeHandler(row.id)"
              ></HintButton>

              <HintButton
                title="gogogo"
                icon="el-icon-delete"
                size="mini"
                name="删除"
                type="danger"
                @click=" deletSpu(row)"
              ></HintButton>

              <HintButton
                title="gogogo"
                icon="el-icon-info"
                size="mini"
                name="详情"
                type="info"
                @click="showSkuInfo(row)"
              ></HintButton>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="limit"
          layout="prev, pager,next,jumper,->,sizes,total "
          :total="total"
          style="text-align: center; margin-right: 50px"
        >
        </el-pagination>
      </div>
      <SpuForm
        :visible.sync="isShowSpuForm"
        ref="spuFrom"
        @sucess="success"
      ></SpuForm>
      <SkuForm
        v-show="isShowSkuForm"
        ref="skuFrom"
        @success="success"
        @toback="isShowSkuForm = false"
      ></SkuForm>
    </el-card>

    <el-dialog
      :title="`${spuName}=>SKU列表数据`"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="skuInfoList">
        <el-table-column property="skuName" label="名称"></el-table-column>
        <el-table-column property="price" label="价格(元)"></el-table-column>
        <el-table-column property="weight" label="重量(千克)"></el-table-column>
        <el-table-column  label="图片">
              <template slot-scope="{row}">
                   <img :src="row.skuDefaultImg" width="100" height="100"/>
              </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from "@/views/product/compoments/SpuForm";
import SkuForm from "@/views/product/compoments/skuForm";
export default {
  name: "Spu",
  components: {
    SpuForm,
    SkuForm,
  },
  data() {
    return {
      spuList: [],
      id1: "",
      id2: "",
      id3: "",
      total: 0,
      page: 1,
      limit: 3,
      isShowSpuForm: false,
      isShowSkuForm: false,
      spuId: "",
      spuName: "",
      dialogTableVisible: false,
      skuInfoList: [],
    };
  },
  methods: {
    getCategoryId({ lv, id }) {
      if (lv == 1) {
        this.id1 = id;
        this.id2 = null;
        this.id3 = null;
        this.total = 0;
        this.spuList = [];
      } else if (lv == 2) {
        this.id2 = id;
        this.id3 = null;
        this.total = 0;
        this.spuList = [];
      } else {
        this.id3 = id;
        this.getSpuInfoPage();
      }
    },
    // 获取分页spu数据
    async getSpuInfoPage() {
      let result = await this.$api.spu.getSpuInfoPageList(
        this.page,
        this.limit,
        this.id3
      );
      if (result.code == 200) {
        console.log(result.data);
        this.spuList = result.data.records;
        this.total = result.data.total;
      }
    },

    // 分页器
    handleSizeChange(val) {
      this.limit = val;
      this.getSpuInfoPage();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSpuInfoPage();
    },
    changeHandler(id) {
      this.spuId = id;
      this.isShowSpuForm = true;
      this.$refs.spuFrom.UpdateData(this.spuId);
    },
    success() {
      this.getSpuInfoPage(this.spuId ? this.page : 1);
    },
    addSpuInfo() {
      this.isShowSpuForm = true;
      this.$refs.spuFrom.addData(this.id3);
    },
    addSku(spu) {
      let spuInfo = {
        ...spu,
        category1Id: this.id1,
        category2Id: this.id2,
      };
      this.isShowSkuForm = true;
      this.$refs.skuFrom.addSkuInfoData(spuInfo);
      // this.$refs.skuFrom.getInitData()
    },
    async showSkuInfo(row) {
      this.dialogTableVisible = true;
  
      this.spuName = row.spuName;
      let result = await this.$api.sku.findBySpuId(row.id);
      if (result.code == 200) {
        this.skuInfoList = result.data;
      } else {
        this.$message.error("sku失败");
      }
    },
    async deletSpu(row){
     await this.$api.spu.deleteSpu(row.id)

    }
  },
};
</script>

<style scoped>
</style>